<nz-modal [(nzVisible)]="isVisible" [nzTitle]="title" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()" [nzWidth]="400">

    <ng-container *nzModalContent>
        <form nz-form [formGroup]="form">
            <nz-form-item>
                <nz-form-label nzRequired [nzSpan]="4">标题</nz-form-label>
                <nz-form-control [nzSpan]="18" nzErrorTip="必填">
                    <input nz-input id="title" formControlName="fName" autocomplete="off" />
                </nz-form-control>
            </nz-form-item>
            <nz-form-item *ngIf="type===0">
                <nz-form-label nzRequired [nzSpan]="4">图标</nz-form-label>
                <nz-form-control [nzSpan]="18" nzErrorTip="必填">
                    <!-- <nz-input-group [nzPrefix]="prefixTemplateIcon" [nzSuffix]="suffixIconSearch">
                        <input nz-input id="icon" formControlName="fIcon" #inputIcon [nzAutocomplete]="auto" (input)="onInputIcon($event)" (keydown)="onKeyDownIcon($event)" style="ime-mode:disabled;" />
                    </nz-input-group>
                    <ng-template #prefixTemplateIcon>
                        <i nz-icon [nzType]="inputIcon.value" class="iconfont"></i>
                    </ng-template>
                    <ng-template #suffixIconSearch>
                        <i nz-icon nzType="search"></i>
                    </ng-template>
                    <nz-autocomplete #auto>
                        <nz-auto-option *ngFor="let name of iconList" [nzValue]="name" [nzLabel]="name">
                            <i nz-icon [nzType]="name" style="font-size: 16px;"></i>
                        </nz-auto-option>
                    </nz-autocomplete> -->
                    <nz-select nzAllowClear [nzCustomTemplate]="selectTmp" formControlName="fIcon" nzDropdownClassName="selectDiv">
                        <nz-option nzCustomContent *ngFor="let name of iconList" [nzValue]="name" [nzLabel]="name">
                            <i nz-icon [nzType]="name" style="font-size: 16px;"></i>
                            <!-- <span>{{name}}</span> -->
                        </nz-option>
                    </nz-select>
                    <ng-template #selectTmp let-selected> <i nz-icon [nzType]="selected.nzValue" style="font-size: 16px;"></i> {{ selected.nzLabel }} </ng-template>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item *ngIf="type===1">
                <nz-form-label nzRequired [nzSpan]="4">路由</nz-form-label>
                <nz-form-control [nzSpan]="18" nzErrorTip="必填">
                    <input nz-input id="url" formControlName="fRouterUrl" autocomplete="off" />
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label nzRequired [nzSpan]="4">别名</nz-form-label>
                <nz-form-control [nzSpan]="18" [nzErrorTip]="ErrorTpl">
                    <input nz-input id="alias" formControlName="fAlias" autocomplete="off" style="ime-mode:disabled;" />
                </nz-form-control>
                <ng-template #ErrorTpl>
                    <ng-container *ngIf="fAlias.dirty && fAlias.errors?.required">必填</ng-container>
                    <ng-container *ngIf="fAlias.dirty && fAlias.errors?.pattern">只能输入英文</ng-container>
                </ng-template>
            </nz-form-item>
            <nz-form-item *ngIf="type===0||type===1">
                <nz-form-label nzRequired [nzSpan]="4">排序</nz-form-label>
                <nz-form-control [nzSpan]="18" nzErrorTip="必填">
                    <nz-input-number id="sort" formControlName="fSort"></nz-input-number>
                </nz-form-control>
            </nz-form-item>
        </form>

    </ng-container>
</nz-modal>